<template>
  <div class="address">
    <div class="top-address">
        <div class="userID">
            <div class="imgID">
              <img :src="loginuser.avatar">
              <div>
                <router-link to="user/data" tag="h3">
                  {{loginuser.nickname}} 
                    <span v-if="loginuser.vip_icon" class="iconImg"><img :src="loginuser.vip_icon">{{loginuser.vip_name}}</span>                  
                </router-link>
                  <router-link to="user/data">
                    <h5>ID: {{loginuser.uid}}</h5> <van-icon name="edit" color='rgba(255,255,255,0.6)' size="0.45rem"/>
                  </router-link>
              </div>
            </div>
            <div class="set">
              <router-link to='user/data'>
                <van-icon name="setting-o" color="#fff" @click='cilckme'/>  
              </router-link>
            </div>
        </div>
    </div>
    <div class="balance">
      <ul class="balanceUl">
        <router-link to="user/assets" tag="li">
          <h5>我的余额</h5>
          <span>{{user.now_money}}</span>
        </router-link>
        <li>
          <h5>当前佣金</h5>
          <span>{{user.commissionCount}}</span>
        </li>
        <li>
          <h5>优惠券</h5>
          <span>{{user.couponCount}}</span>
        </li>
      </ul>
    </div>
    <div class="myorder">
      <van-cell title="我的订单" is-link value="全部订单" to="/order"/>
      <van-grid :column-num="5">
        <van-grid-item icon="pending-payment" text="待付款" :badge="order.unpaid_count" to="order/list/0"/>
        <van-grid-item icon="sign" text="待发货" :badge="order.order_count" to="order/list/1"/>
        <van-grid-item icon="logistics" text="待收货" :badge="order.received_count" to="order/list/2"/>
        <van-grid-item icon="comment-o" text="待评价" :badge="order.evaluated_count" to="order/list/3"/>
        <van-grid-item icon="after-sale" text="售后/退款" :badge="order.refund_count" to="order/list/4"/>
      </van-grid>
    </div>
    <div class="myservice">
     <van-cell title="我的服务" />
     <van-grid >
      <van-grid-item v-for="item in logorder.routine_my_menus" :key="item.id" 
      :icon="item.pic" :text="item.name" />
    </van-grid>
    </div>
    <!-- <button @click="logout">退出登录</button> -->
  </div>
</template>
<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      order: [],
      user:[]
    };
  },
  methods: {
    ...mapMutations(["loginout"]),
    logout() {
      this.loginout();
      this.$dialog({
        title: "退出登录",
        message: "退出成功"
      }).then(() => {
        this.$router.push("/");
      });
    },
    cilckme() {
      console.log("你点击了我");
    }
  },
  computed: {
    ...mapGetters(["loginuser", "logorder"])
  },
  created() {
    this.axios
      .get("/order/data", {
        headers: {
          "Authori-zation": "Bearer " + localStorage.getItem("token")
        }
      })
      .then(re => {
        // console.log(re);
        this.order = re;
      });
    this.axios
      .get("/user", {
        headers: {
          "Authori-zation": "Bearer " + localStorage.getItem("token")
        }
      })
      .then(re => {
        // console.log(re);
        this.user = re;
      });
  }
};
</script>
<style lang="less">
.address {
  background: #f5f5f5;
  height: 100vh;
}
.top-address {
  width: 100vw;
  height: 95px;
  background: #e93323;
  position: relative;
  .userID {
    display: flex;
    padding: 20px 0px 0px 15px;
    .imgID {
      flex: 1;
      display: flex;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #fff;
      }
      div {
        flex: 1;
        font-size: 16px;
        color: #fff;
        padding: 10px 0px 0px 20px;
        // display: flex;
      }
      h3 {
        line-height: 18px;
        // display: inline-block;
      }
      h5,
      span {
        display: inline-block;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        line-height: 20px;
        margin-top: 2px;
      }
      .iconImg {
        width: 80px;
        height: 18px;
        background: rgba(0, 0, 0, 0.2);
        line-height: 20px;
        border-radius: 10px;
        color: #fff;
        font-size: 12px;
        // display: flex;
        img {
          // padding-top: 1px;
          width: 14px;
          height: 14px;
          margin: 0px 5px 0px 5px;
          display: inline-block;
          vertical-align: text-top;
          border: none;
        }
      }
    }
    .set {
      width: 50px;
      text-align: center;
      font-size: 20px;
      padding-top: 10px;
    }
    &::after {
      content: "";
      width: 100vw;
      height: 40px;
      background: #e93323;
      position: absolute;
      bottom: -40px;
      left: 0px;
      border-radius: 0px 0px 50% 50%;
      z-index: 1;
    }
  }
}
.balance {
  height: 70px;
  margin: 0px 10px 0px 10px;
  background: #fff;
  position: relative;
  border-radius: 5px;
  z-index: 2;
  .balanceUl {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      position: relative;
      h5 {
        font-size: 13px;
        color: #aaa;
        line-height: 20px;
        padding-top: 15px;
      }
      span {
        font-size: 18px;
      }
      &:nth-child(2) {
        &::after,
        &::before {
          content: "";
          width: 1px;
          height: 40px;
          position: absolute;
          background: #eee;
          top: 50%;
          transform: translateY(-50%);
        }
        &::after {
          left: 0px;
        }
        &::before {
          right: 0px;
        }
      }
    }
  }
}
.myorder {
  margin: 10px;
  .van-cell {
    border-radius: 5px 5px 0px 0px;
  }
  .van-grid {
    border-radius: 0px 0px 5px 5px;
    .van-grid-item {
      text-align: center;
      .van-icon {
        color: rgb(240, 109, 102);
        .van-info {
          background: #fff;
          color: rgb(240, 109, 102);
          border: 1px solid rgb(240, 109, 102);
        }
      }
      .van-grid-item__content::after {
        border: none;
      }
    }
  }
}
.myservice {
  margin: 10px;
  .van-cell {
    border-radius: 5px 5px 0px 0px;
  }
  .van-icon {
    width: 26px;
    height: 26px;
  }
  .van-grid-item__text {
    font-size: 13px;
    color: #333;
  }
}
</style>

